<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
    <script src="./dist/include-openlayers-local.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
      #toggle {
        position: fixed;
        right: 10px;
        bottom: 10px;
        width: 310px;
        height: 150px;
        border: 0;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <div id="toggle">
      <span id="toggle1">
        <img src="./images/影像图.png" style="width: 150px; height: 100px" />
      </span>
      <span id="toggle2">
        <img src="./images/矢量图.png" style="width: 150px; height: 100px" />
      </span>
    </div>
    <div id="map"></div>

    <script>
      /* 1.加载高德地图 */
      var gaodeMapLayer = new ol.layer.Tile({
        title: "高德矢量地图",
        source: new ol.source.XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
          wrapX: false,
        }),
      })
      var image = new ol.layer.Tile({
        title: "高德影像地图",
        source: new ol.source.XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
          wrapX: false,
        }),
      })
      var zhuji = new ol.layer.Tile({
        title: "高德影像地图注记图层",
        source: new ol.source.XYZ({
          url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
          wrapX: false,
        }),
      })

      const map = new ol.Map({
        target: "map",
        layers: [gaodeMapLayer, image, zhuji],
        view: new ol.View({
          center: [114, 30],
          zoom: 5,
          projection: "EPSG:4326",
        }),
      })

      //显示影像图层
      $("#toggle1").click(function () {
        var layers = map.getLayers().getArray() //拿到 图层 数组
        layers[1].setVisible(true)
        layers[2].setVisible(true)
      })
      //显示矢量图层
      $("#toggle2").click(function () {
        var layers = map.getLayers().getArray() //拿到 图层 数组
        layers[1].setVisible(false)
        layers[2].setVisible(false)
      })
    </script>
  </body>
</html>
